<template>
    <div class="posts">
        <div v-for="(item, index) in pagePosts"
            :class="[index == 0 ? '' : 'mt-8', 'border border-x-0 border-t-0 border-b-gray-200 pb-7']">
            <PostTitle :title="item.frontMatter.title" :date="item.frontMatter.date" :author="item.frontMatter.author"
                :tags="item.frontMatter.tags" :islink="true" :titlelink="withBase(item.regularPath)" />
            <p class="description">{{ item.frontMatter.description }}</p>
        </div>
        <Pagination :current-page="currentPage" @currentPageChanged="currentPageChanged" :posts="posts" />
    </div>
</template>

<script setup lang="ts">
import PostTitle from "./PostTitle.vue"
import Pagination from "./Pagination.vue"

import { setStoragePage, getPostsOnPage } from "../helpers/pagination"

import { ref, computed, onMounted } from "vue"
import { useData, withBase } from "vitepress"

const props = defineProps({
    posts: Array,
    currentPage: Number
})

const emit = defineEmits(['currentPageChanged'])
const pagePosts = computed(() => getPostsOnPage(props.posts, props.currentPage))

const currentPageChanged = (newPageNum) => {
    // props.currentPage = newPageNum
    setStoragePage(newPageNum)
    window.scrollTo(0, 0)
    emit('currentPageChanged', newPageNum)
}

</script>

<style>
.description {
    color: gray;
    margin-top: 10px;
}
</style>